<template>
  <Header style="margin-bottom: 20px"></Header>
  <div class="showcart-detail">
    <div class="circle" style="float: left">MP</div>
    <p>
      <span style="color: rgb(242, 89, 75); font-family: Microsoft YaHei; font-size: 20px; line-height: 140%;">个人订单</span>
    </p>
    <p>
        <span style="color: rgb(102, 102, 102); font-family: Microsoft YaHei; font-size: 10px; letter-spacing: 0px; line-height: 140%;">
        MY PURCHASE
        </span><br>
    </p>
    <div class="pur-table">
      <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #1c1c1c;"
          @selection-change="handleSelectionChange"
      >
        <el-table-column  >
          <template #default="scope">
            <img :src="scope.row.imageUrl"  style="width: 140px; height: 140px;margin: 10px 10px 0" />
          </template>
        </el-table-column>
        <el-table-column property="flowerName" label="名称" />
        <el-table-column  label="单价" >
          <template #default="scope">
            <span>￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column property="quantity" label="数量" />
        <el-table-column  label="实付款">
          <template #default="scope">
            <span style="font-weight: bold">￥{{ scope.row.totalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="scope">
            <span :style="{ color: getStatusColor(scope.row.orderStatus), fontWeight:'bold '}">{{ scope.row.orderStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column property="state" label="交易操作" width="100vh">
          <template #default="scope">
            <el-button type="primary" size="small" style="margin-bottom: 6px" @click="confirmReceipt(scope.row)" :disabled="primary(scope.row.orderStatus)">确认收货</el-button><br/>
            <el-button type="warning" size="small" @click="inproduct(scope.row.flowerId)">再次购买</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页-->
      <div style="margin: 20px 0">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<style>
.showcart-detail{
  width: 80%;
  margin: 0 auto;
}
.pur-table .el-table__header-wrapper th {
  background-color: #f5f5f5;
  //border: 1px solid #e8e8e8;
  color: #333;
  font-size: 14px;
  font-weight: normal;
  height: 50px;
}

.circle {
  margin-bottom: 30px;
  margin-top: 10px;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  background-color: #ff6347;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  line-height: 180%;
  color: #FFFFFF;
  text-align: center;
}
</style>
<script>
import {ArrowLeftBold, Pointer} from "@element-plus/icons-vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import request from "@/utils/request";
import router from "@/router";

export default {
  name: 'ProductTable',
  components: {Footer, Header, Pointer, ArrowLeftBold},
  data() {
    return {
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 10,
      tableData: [],
      str:{},
    }
  },
  created() {
    this.str = JSON.parse(localStorage.getItem("xm-pro-user"))
    this.load()
  },
  methods: {
    load() {
      request.get("/order/myOrder", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.str.id
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total

      })
    },
    handleSizeChange() {
      this.load()
    },
    handleCurrentChange() {
      this.load()
    },
    getStatusColor(status) {
      // 根据状态返回相应的颜色
      switch (status) {
        case '已发货':
          return 'blue';
        case '已完成':
          return 'green';
        case '未发货':
          return 'red';
        default:
          return 'black'; // 默认颜色
      }
    },
    confirmReceipt(row){
      this.form = JSON.parse(JSON.stringify(row))
      request.put("/order/shipments", this.form).then(res => {
        if (res.code === '0') {
          this.$message.success("确认收货成功")
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    primary(status){
      switch (status) {
        case '已发货':
          return false;
        case '已完成':
          return true;
        case '未发货':
          return true;
        default:
          return false;
      }
    },
    inproduct(row){
      router.push('/product/'+row)
    }
  },
};
</script>